<!DOCTYPE html>
<!-- saved from url=(0074)http://hompimpa.googlecode.com/svn/trunk/CSS3ButtonGenerator-V3/index.html -->
<html dir="ltr"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="stylesheet" type="text/css" href="./Portable CSS3 Button Generator_files/widget119.css" media="all">
    
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <meta content="online css button generator, online css button maker, online css button creator" name="keywords">
    <meta content="Portable CSS button maker tool for quick time works" name="description">
    <meta content="Taufik Nurrohman" name="author">
    <title>Portable CSS3 Button Generator</title>
    <link rel="shorcut icon" href="http://mini-web-tools.googlecode.com/svn/p/img/favicon.ico">
    <link rel="stylesheet" type="text/css" href="./Portable CSS3 Button Generator_files/jquery-ui-custom-theme.css">
    <link rel="stylesheet" type="text/css" href="./Portable CSS3 Button Generator_files/style.css">
    <link rel="stylesheet" type="text/css" href="./Portable CSS3 Button Generator_files/colorpicker.css">

    <script type="text/javascript" src="./Portable CSS3 Button Generator_files/jquery-1.7.1.min.js"></script><style type="text/css"></style>
    <script type="text/javascript" src="./Portable CSS3 Button Generator_files/jquery-ui-1.8.18.custom.min.js"></script>
    <script type="text/javascript" src="./Portable CSS3 Button Generator_files/colorpicker.js"></script>
    <script type="text/javascript" src="./Portable CSS3 Button Generator_files/buttonmaker.js"></script>
    <style type="text/css">
    .addthis_toolbox {
      position:fixed !important;
      position:absolute;
      right:12px;
      bottom:10px;
    }
    </style>

<style id="thestyle" type="text/css">.button {  cursor:pointer;  border:1px solid #3f5691;  background-color:#3059ab;  filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#2770d6', endColorstr='#3059ab');  background-image:-webkit-linear-gradient(top, #2770d6 0%, #3161c2 50%, #3059ab 100%);  background-image:-moz-linear-gradient(top, #2770d6 0%, #3161c2 50%, #3059ab 100%);  background-image:-ms-linear-gradient(top, #2770d6 0%, #3161c2 50%, #3059ab 100%);  background-image:-o-linear-gradient(top, #2770d6 0%, #3161c2 50%, #3059ab 100%);  background-image:linear-gradient(top, #2770d6 0%, #3161c2 50%, #3059ab 100%);  padding:20px 40px;  -webkit-border-radius:8px;  -moz-border-radius:8px;  border-radius:8px;  -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #515151;  -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #515151;  box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #515151;  text-shadow:0px 1px 0px rgba(0,0,0,0.3);  color:#ffffff;  font:normal 16px 'Century Gothic',Helvetica,Arial,Sans-Serif;  text-decoration:none;  outline:none;  vertical-align:middle;}.button:hover, .hover {  border-color:#0f2852;  background-color:#49579c;  filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#49579c', endColorstr='#142b70');  background-image:-webkit-linear-gradient(top, #49579c 0%, #1b3880 50%, #142b70 100%);  background-image:-moz-linear-gradient(top, #49579c 0%, #1b3880 50%, #142b70 100%);  background-image:-ms-linear-gradient(top, #49579c 0%, #1b3880 50%, #142b70 100%);  background-image:-o-linear-gradient(top, #49579c 0%, #1b3880 50%, #142b70 100%);  background-image:linear-gradient(top, #49579c 0%, #1b3880 50%, #142b70 100%);  color:#ffffff;}.button:active {  background-color:#142b70;  filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#142b70', endColorstr='#49579c');  background-image:-webkit-linear-gradient(top, #142b70, #49579c);  background-image:-moz-linear-gradient(top, #142b70, #49579c);  background-image:-ms-linear-gradient(top, #142b70, #49579c);  background-image:-o-linear-gradient(top, #142b70, #49579c);  background-image:linear-gradient(top, #142b70, #49579c);}</style></head>

<body>

    <div id="page-wrap">

        <div id="button-box">
            <a class="button" href="http://hompimpa.googlecode.com/svn/trunk/CSS3ButtonGenerator-V3/index.html#" style="top: 48px; left: 54px;">Generate CSS</a>
        </div>

        <div id="prikitiw">
            <div id="colors">
                <div class="hompi-warna"><label for="topGradientValue">Top Gradient Color</label>
                <input type="text" maxlength="6" size="6" id="topGradientValue" class="pickable" rel="backgroundTop" value="2770d6" style="background: #2770d6;"></div>

                <div class="hompi-warna"><label for="middleGradientValue">Middle Gradient Color</label>
                <input type="text" maxlength="6" size="6" id="middleGradientValue" class="pickable" rel="backgroundCent" value="3161c2" style="background: #3161c2;"></div>

                <div class="hompi-warna"><label for="bottomGradientValue">Bottom Gradient Color</label>
                <input type="text" maxlength="6" size="6" id="bottomGradientValue" class="pickable" rel="backgroundBottom" value="3059ab" style="background: #3059ab;"></div>

                <div class="hompi-warna"><label for="borderColorValue">Border Color</label>
                <input type="text" maxlength="6" size="6" id="borderColorValue" class="pickable" rel="borderColor" value="3f5691" style="background: #3f5691;"></div>

                <div class="hompi-warna"><label for="textColor">Text Color</label>
                <input type="text" maxlength="6" size="6" id="textColor" class="pickable" rel="textColor" value="ffffff" style="background: #ffffff;"></div>

                <div class="hompi-warna"><label for="bayangColor">Shadow Color</label>
                <input type="text" maxlength="6" size="6" id="bayangColor" class="pickable" rel="warnaBayang" value="515151" style="background: #515151;"></div>
 
                <div id="hover-section">
                    <div class="hompi-warna"><label for="hoverBackgroundColorTopValue">Hover Top Gradient Color</label>
                    <input type="text" maxlength="6" size="6" id="hoverBackgroundColorTopValue" class="pickable" rel="hoverBackgroundTop" value="49579c" style="background: #49579c;"></div>

                    <div class="hompi-warna"><label for="hoverBackgroundColorCentValue">Hover Middle Gradient Color</label>
                    <input type="text" maxlength="6" size="6" id="hoverBackgroundColorCentValue" class="pickable" rel="hoverBackgroundCent" value="1b3880" style="background: #1b3880;"></div>

                    <div class="hompi-warna"><label for="hoverBackgroundColorBottomValue">Hover Bottom Gradient Color</label>
                    <input type="text" maxlength="6" size="6" id="hoverBackgroundColorBottomValue" class="pickable" rel="hoverBackgroundBottom" value="142b70" style="background: #142b70;"></div>

                    <div class="hompi-warna"><label for="borderHoverColorValue">Hover Border Color</label>
                    <input type="text" maxlength="6" size="6" id="borderHoverColorValue" class="pickable" rel="borderHoverColor" value="0f2852" style="background: #0f2852;"></div>

                    <div class="hompi-warna"><label for="hoverTextColorValue">Hover Text Color</label>
                    <input type="text" maxlength="6" size="6" id="hoverTextColorValue" class="pickable" rel="hoverColor" value="ffffff" style="background: #ffffff;"></div>
               </div>
           </div>
         </div>

        <div id="controls">
            <span class="bt" id="ukur">Variable Size</span>
            <span class="bt" id="opsi">More Options</span>
            <span class="bt" id="advanced">Advanced</span>
            <span class="bt" id="toggle1"><span>Dark Background</span><span style="display:none;">Light Background</span></span>
            <span class="bt">Change Class: <input type="text" class="teks" id="ganti" value="button"></span>
            <span class="bt" id="showhow">How to Use</span>
        </div>    

        <div class="clear"></div>

        <div id="ukuran">
            Font Size:
            <div class="sliderBar ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="font-sizer" title="Font Size"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 50%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="http://hompimpa.googlecode.com/svn/trunk/CSS3ButtonGenerator-V3/index.html#" style="left: 50%;"></a></div>
            Padding:
            <div class="sliderBar ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="sizer" title="Button Padding"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 47.368421052631575%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="http://hompimpa.googlecode.com/svn/trunk/CSS3ButtonGenerator-V3/index.html#" style="left: 47.368421052631575%;"></a></div>
            Border Width:
            <div class="sliderBar ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="penebal-border" title="Border Width"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 4.166666666666666%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="http://hompimpa.googlecode.com/svn/trunk/CSS3ButtonGenerator-V3/index.html#" style="left: 4.166666666666666%;"></a></div>
            Border Radius:
            <div class="sliderBar ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="border-rounder" title="Border Radius"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 6.666666666666667%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="http://hompimpa.googlecode.com/svn/trunk/CSS3ButtonGenerator-V3/index.html#" style="left: 6.666666666666667%;"></a></div>
            Shadow Offset-X:
            <div class="sliderBar ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="bayanganX" title="Shadow Offset-X"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 50%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="http://hompimpa.googlecode.com/svn/trunk/CSS3ButtonGenerator-V3/index.html#" style="left: 50%;"></a></div>
            Shadow Offset-Y:
            <div class="sliderBar ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="bayanganY" title="Shadow Offset-Y"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 52.5%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="http://hompimpa.googlecode.com/svn/trunk/CSS3ButtonGenerator-V3/index.html#" style="left: 52.5%;"></a></div>
            Shadow Blur: <div class="sliderBar ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="bayangan" title="Button Shadow Blur"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 10%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="http://hompimpa.googlecode.com/svn/trunk/CSS3ButtonGenerator-V3/index.html#" style="left: 10%;"></a></div>
        </div>


        <div id="opsi-lain">
                <table border="0">
                <tbody><tr><td>Font Family:</td><td>
                    <select id="fontSelector">
                        <option value="Calibri,Arial,Sans-Serif">Calibri</option>
                        <option value="Arial,Sans-Serif">Arial</option>
                        <option value="Helvetica,Arial,Sans-Serif">Helvetica</option>
                        <option value="Georgia,Serif">Georgia</option>
                        <option value="Times,Serif">Times New Roman</option>
                        <option value="&#39;Comic Sans MS&#39;,Arial,Sans-Serif">Comic Sans MS</option>
                        <option value="Verdana,Arial,Serif">Verdana</option>
                        <option value="Monospace,Serif">Monospace</option>
                        <option value="&#39;Garamond&#39;,Helvetica,Arial,Sans-Serif">Garamond</option>
                        <option value="Impact,Helvetica,Arial,Sans-Serif">Impact</option>
                        <option value="&#39;Cooper Black&#39;,&#39;Comic Sans MS&#39;,Arial,Sans-Serif">Cooper Black</option>
                        <option value="&#39;Showcard Gothic&#39;,Helvetica,Arial,Sans-Serif">Showcard Gothic</option>
                        <option value="&#39;Bauhaus 93&#39;,Helvetica,Arial,Sans-Serif">Bauhaus 93</option>
                        <option selected="selected" value="&#39;Century Gothic&#39;,Helvetica,Arial,Sans-Serif">Century Gothic</option>
                        <option value="Tahoma,Verdana,Arial,Sans-Serif">Tahoma</option>
                    </select>
                </td></tr>
                <tr><td>Font Weight:</td><td>
                    <select id="fontWeight">
                        <option selected="selected" value="normal">Regular</option>
                        <option value="bold">Bold</option>
                        <option value="italic">Italic</option>
                    </select>
                </td></tr>
                <tr><td>Border Style:</td><td>
                    <select id="borderStyleSelector">
                        <option selected="selected" value="solid">Solid</option>
                        <option value="double">Double</option>
                        <option value="dashed">Dashed</option>
                        <option value="dotted">Dotted</option>
                        <option value="outset">Outset</option>
                        <option value="inset">Inset</option>
                        <option value="ridge">Ridge</option>
                        <option value="groove">Groove</option>
                    </select>
                </td></tr>
                <tr><td>Box Shadow:</td><td>
                    <select id="boxShadow">
                        <option selected="selected" value="">Outset</option>
                        <option value="inset ">Inset</option>
                    </select>
                </td></tr>
                <tr><td>Text Dimension:</td><td>
                    <select id="textShadow">
                        <option selected="selected" value="rgba(0,0,0,0.4)">Embossed</option>
                        <option value="rgba(255,255,255,0.3)">Letterpress</option>
                    </select>
                </td></tr>
            </tbody></table>
            <p>Letterpress dimensional option will looks good only when combined with the text color that darker than the the button background color.</p>
        </div>


        <div id="color-stop-advanced">
            <h4>Default Behaviour Color Stop</h4>
            <div class="def">
                <div class="sliderBar ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="cstop1" title="Color Stop"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 0%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="http://hompimpa.googlecode.com/svn/trunk/CSS3ButtonGenerator-V3/index.html#" style="left: 0%;"></a></div>
                <div class="sliderBar ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="cstop2" title="Color Stop"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 50%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="http://hompimpa.googlecode.com/svn/trunk/CSS3ButtonGenerator-V3/index.html#" style="left: 50%;"></a></div>
                <div class="sliderBar ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="cstop3" title="Color Stop"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 100%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="http://hompimpa.googlecode.com/svn/trunk/CSS3ButtonGenerator-V3/index.html#" style="left: 100%;"></a></div>
            </div>

            <h4>Hover Color Stop</h4>
            <div class="hov">
                <div class="sliderBar ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="cstop12" title="Color Stop"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 0%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="http://hompimpa.googlecode.com/svn/trunk/CSS3ButtonGenerator-V3/index.html#" style="left: 0%;"></a></div>
                <div class="sliderBar ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="cstop22" title="Color Stop"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 50%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="http://hompimpa.googlecode.com/svn/trunk/CSS3ButtonGenerator-V3/index.html#" style="left: 50%;"></a></div>
                <div class="sliderBar ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="cstop32" title="Color Stop"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 100%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="http://hompimpa.googlecode.com/svn/trunk/CSS3ButtonGenerator-V3/index.html#" style="left: 100%;"></a></div>
            </div>

            <h4>Custom Gradient Orientation</h4>
            <div id="custom-gradient">
                <input type="radio" name="orientation" checked="checked" value="top" rel="0">Top<br>
                <input type="radio" name="orientation" value="right" rel="1">Right<br>
                <input type="radio" name="orientation" value="bottom" rel="0">Bottom<br>
                <input type="radio" name="orientation" value="left" rel="1">Left<br>
                <input type="checkbox" name="customorient"><strong>Custom Orientation</strong>
                <div class="sliderBar ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="custom" style="display:none;"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 75%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="http://hompimpa.googlecode.com/svn/trunk/CSS3ButtonGenerator-V3/index.html#" style="left: 75%;"></a></div>
            </div>

        </div>

        <pre id="kode-css">.button {<br>    cursor:pointer;<br>    border:1px solid #3f5691;<br>    background-color:#3059ab;<br>    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#2770d6', endColorstr='#3059ab');<br>    background-image:-webkit-linear-gradient(top, #2770d6 0%, #3161c2 50%, #3059ab 100%);<br>    background-image:-moz-linear-gradient(top, #2770d6 0%, #3161c2 50%, #3059ab 100%);<br>    background-image:-ms-linear-gradient(top, #2770d6 0%, #3161c2 50%, #3059ab 100%);<br>    background-image:-o-linear-gradient(top, #2770d6 0%, #3161c2 50%, #3059ab 100%);<br>    background-image:linear-gradient(top, #2770d6 0%, #3161c2 50%, #3059ab 100%);<br>    padding:20px 40px;<br>    -webkit-border-radius:8px;<br>    -moz-border-radius:8px;<br>    border-radius:8px;<br>    -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #515151;<br>    -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #515151;<br>    box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #515151;<br>    text-shadow:0px 1px 0px rgba(0,0,0,0.3);<br>    color:#ffffff;<br>    font:normal 16px 'Century Gothic',Helvetica,Arial,Sans-Serif;<br>    text-decoration:none;<br>    outline:none;<br>    vertical-align:middle;<br>}<br><br>.button:hover {<br>    border-color:#0f2852;<br>    background-color:#49579c;<br>    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#49579c', endColorstr='#142b70');<br>    background-image:-webkit-linear-gradient(top, #49579c 0%, #1b3880 50%, #142b70 100%);<br>    background-image:-moz-linear-gradient(top, #49579c 0%, #1b3880 50%, #142b70 100%);<br>    background-image:-ms-linear-gradient(top, #49579c 0%, #1b3880 50%, #142b70 100%);<br>    background-image:-o-linear-gradient(top, #49579c 0%, #1b3880 50%, #142b70 100%);<br>    background-image:linear-gradient(top, #49579c 0%, #1b3880 50%, #142b70 100%);<br>    color:#ffffff;<br>}<br><br>.button:active {<br>    background-color:#142b70;<br>    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#142b70', endColorstr='#49579c');<br>    background-image:-webkit-linear-gradient(top, #142b70, #49579c);<br>    background-image:-moz-linear-gradient(top, #142b70, #49579c);<br>    background-image:-ms-linear-gradient(top, #142b70, #49579c);<br>    background-image:-o-linear-gradient(top, #142b70, #49579c);<br>    background-image:linear-gradient(top, #142b70, #49579c);<br>}<br><br></pre> 

        <div id="howto">
            <div style="text-align:center;margin-bottom:10px;"><img src="./Portable CSS3 Button Generator_files/dte-darkblue.png" alt="meee"></div>
            <h2>Portable CSS3 Button Generator :: About Second Revision</h2>
            Do whatever you can do on this tool. Click on the "Generate CSS" button to get the CSS Code. Put on your template stylesheet. Calling the CSS can be done by writing the HTML code wherever you want like this:

            <pre><code>&lt;a class="button" href="#"&gt;Button Name&lt;/a&gt;</code></pre>

            or like this:

            <pre><code>&lt;button class="button"&gt;Button Name&lt;/button&gt;</code></pre>

            or like this:

            <pre><code>&lt;span class="button"&gt;Button Name&lt;/span&gt;</code></pre>

            or like this:

            <pre><code>&lt;input type="button" class="button" value="Button Name" /&gt;</code></pre>

        </div>

    </div>

    <div class="author">Update: 5 March 2012 by <a href="https://plus.google.com/108949996304093815163/about">Taufik Nurrohman</a></div>

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="./Portable CSS3 Button Generator_files/addthis_widget.js"></script><div id="_atssh" style="visibility: hidden; height: 1px; width: 1px; position: absolute; z-index: 100000;"><iframe id="_atssh321" title="AddThis utility frame" style="height: 1px; width: 1px; position: absolute; z-index: 100000; border: 0px; left: 0px; top: 0px;"></iframe></div><script type="text/javascript" src="./Portable CSS3 Button Generator_files/core128.js"></script>
<!-- AddThis Button END -->



<div class="colorpicker" id="collorpicker_357"><div class="colorpicker_color" style="background-color: rgb(255, 0, 0);"><div><div style="left: 150px; top: 0px;"></div></div></div><div class="colorpicker_hue"><div style="top: 150px;"></div></div><div class="colorpicker_new_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_current_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6"></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_submit">OK!</div></div><div class="colorpicker" id="collorpicker_114"><div class="colorpicker_color" style="background-color: rgb(255, 0, 0);"><div><div style="left: 150px; top: 0px;"></div></div></div><div class="colorpicker_hue"><div style="top: 150px;"></div></div><div class="colorpicker_new_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_current_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6"></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_submit">OK!</div></div><div class="colorpicker" id="collorpicker_922"><div class="colorpicker_color" style="background-color: rgb(255, 0, 0);"><div><div style="left: 150px; top: 0px;"></div></div></div><div class="colorpicker_hue"><div style="top: 150px;"></div></div><div class="colorpicker_new_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_current_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6"></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_submit">OK!</div></div><div class="colorpicker" id="collorpicker_30"><div class="colorpicker_color" style="background-color: rgb(255, 0, 0);"><div><div style="left: 150px; top: 0px;"></div></div></div><div class="colorpicker_hue"><div style="top: 150px;"></div></div><div class="colorpicker_new_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_current_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6"></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_submit">OK!</div></div><div class="colorpicker" id="collorpicker_395"><div class="colorpicker_color" style="background-color: rgb(255, 0, 0);"><div><div style="left: 150px; top: 0px;"></div></div></div><div class="colorpicker_hue"><div style="top: 150px;"></div></div><div class="colorpicker_new_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_current_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6"></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_submit">OK!</div></div><div class="colorpicker" id="collorpicker_449"><div class="colorpicker_color" style="background-color: rgb(255, 0, 0);"><div><div style="left: 150px; top: 0px;"></div></div></div><div class="colorpicker_hue"><div style="top: 150px;"></div></div><div class="colorpicker_new_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_current_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6"></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_submit">OK!</div></div><div class="colorpicker" id="collorpicker_0"><div class="colorpicker_color" style="background-color: rgb(255, 0, 0);"><div><div style="left: 150px; top: 0px;"></div></div></div><div class="colorpicker_hue"><div style="top: 150px;"></div></div><div class="colorpicker_new_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_current_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6"></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_submit">OK!</div></div><div class="colorpicker" id="collorpicker_412"><div class="colorpicker_color" style="background-color: rgb(255, 0, 0);"><div><div style="left: 150px; top: 0px;"></div></div></div><div class="colorpicker_hue"><div style="top: 150px;"></div></div><div class="colorpicker_new_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_current_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6"></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_submit">OK!</div></div><div class="colorpicker" id="collorpicker_445"><div class="colorpicker_color" style="background-color: rgb(255, 0, 0);"><div><div style="left: 150px; top: 0px;"></div></div></div><div class="colorpicker_hue"><div style="top: 150px;"></div></div><div class="colorpicker_new_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_current_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6"></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_submit">OK!</div></div><div class="colorpicker" id="collorpicker_98"><div class="colorpicker_color" style="background-color: rgb(255, 0, 0);"><div><div style="left: 150px; top: 0px;"></div></div></div><div class="colorpicker_hue"><div style="top: 150px;"></div></div><div class="colorpicker_new_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_current_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6"></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_submit">OK!</div></div><div class="colorpicker" id="collorpicker_47"><div class="colorpicker_color" style="background-color: rgb(255, 0, 0);"><div><div style="left: 150px; top: 0px;"></div></div></div><div class="colorpicker_hue"><div style="top: 150px;"></div></div><div class="colorpicker_new_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_current_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6"></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_submit">OK!</div></div><canvas style="display: none;"></canvas></body></html>